<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<title>Document</title>-->
    <link rel="stylesheet" href="/static/app/lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="/static/app/css/style.css">
    <script src="/static/app/lib/zy.rem.js"></script>
    <script src="/static/app/lib/jquery1.12.3.min.js"></script>
    <script src="/static/app/js/base.js"></script>
    <style>
        .bottom-center{
            width:100%;
            border-bottom: 0.002rem solid #ccc;
            background-color: #fff;
            position: relative;
            z-index:999;
            opacity:0.85;
        }
        .address{
            margin-top: 0.15rem;
            margin-left: 0.2rem;
            font-size: 0.26rem;
        }
        .getime{
            margin-top: 0.15rem;
            margin-left: 0.2rem;
            font-size: 0.21rem;
            color: #666;
        }
        .type{
            margin-top: 0.1rem;
            margin-left: 0.2rem;
            font-size: 0.21rem;
            color: #666;
        }
        .lat{
            margin-top: 0.1rem;
            margin-left: 0.2rem;
            font-size: 0.21rem;
            color: #666;
            display: inline-block;
        }
        .long{
            margin-top: 0.1rem;
            margin-left: 0.5rem;
            font-size: 0.21rem;
            color: #666;
            display: inline-block;
        }
        span{
            margin-left: 0.1rem;
        }
        .fdfd{
            width: 90%;
            margin-left: 5%;
            height: 11.4rem;
            border-bottom: 0.002rem solid #ccc;
            background-color: #fff;
            position: absolute;
            top: 0.9rem;
            z-index: 1000;
            /*opacity: 0.9;*/
            display: none;
        }
        .dffs{
            margin-left: 0.3rem;
            margin-top: 0.3rem;
            font-size: 0.3rem;
            color: #000;
        }
        .namess{
            margin-left: 0.3rem;
            margin-top: 0.3rem;
            font-size: 0.3rem;
            /*border-bottom: 0.001rem solid #ccc;*/
            color: #c2c2c2;
        }
        .xuan{
            display: none;
        }
        .naui{
            width: 10%;
            height: 0.7rem;
            background-color: #fff;
            z-index: 999;
            opacity: 0.85;
            position: absolute;
            left: 45%;
            bottom: 0.2rem;
            border-radius: 0.5rem;
        }
        /*一键导航按钮--百度*/
        .naui2{
            width: 29%;
            background-color: #135f49;
            color: white;
            font-size: 0.3rem;
            text-align:center;
            position: absolute;
            left: 70%;
            bottom: 30px;
            border-radius: 0.5rem;
        }
        /*一键导航按钮--高德*/
        .naui3{
            width: 19%;
            background-color: #135f49;
            color: white;
            text-align:center;
            position: absolute;
            left: 70%;
            bottom: -0.4rem;
            border-radius: 0.5rem;
        }
        .div{
            position: relative;

        }
        .tishi{
            width: 100%;
            font-size: 0.3rem;
            color: #fff;
            background-color: rgba(37, 37, 37, 0.62);
            text-align: center;
            padding-top: 3%;
            padding-bottom: 3%;
            z-index: 2000;
            position: absolute;
            display: none;
        }
        .as{
            color: red;
        }
    </style>
</head>
<body>
<div class="header">
    <div></div>
    <div onclick="ddfg();">位置信息<img src="/static/app/img/xia2.png"></div>
    <div><a href="javascript:;" class="head-btn iconfont">&#xe601;</a></div>
</div>
<div class="fdfd" style="padding:0;">
    <div class="dffs">当 前 的 设 备:</div>
    {foreach name="data" key="key" item="v"}
    <div class="namess" data-val="{$v.id}" onclick="xuhu(this,{$v.name})">{$v.nickname}
    </div>
    {/foreach}
    <input type="hidden" name="imei" id="imei" value="{$name}">
</div>

<div class="center" style="padding:0;">
    <div class="tishi">暂未绑定设备</div>
    <div id="allmap"  style='width:100%; height:11.5rem'></div>
</div>

<div class="bottom-center" style=" display: inline-block;">

    <div class="div">
        <!--<a class="naui3" href="https://uri.amap.com/marker?position=114.593294,38.127997&name=河北省石家庄市正定县正定镇河北大道">高德地图</a>-->
        <a class="naui2" href="http://api.map.baidu.com/marker?location=38.127997,114.593294&title=河北省石家庄市正定县正定镇河北大道&content=所在位置的简介（可选）&output=html">百度导航</a>
        <div class="naui"  onclick="anui()"><img src="/static/app/img/shang.png" class="imges" style="padding-left: 0.23rem;padding-top: 0.1rem;"></div>
        <div class="address">设备未激活</div>
    </div>
    <div class="getime">更新于:<span id="time"></span><span id="online"></span></div>
    <div class="xuan">
        <div class="type">定位模式:<span></span></div>
        <div class="lat">经度:<span></span></div>
        <div class="long">纬度:<span></span></div>
    </div>
</div>
{include file='public:bottom'}
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2COzFaICuIyVj7V3VetKfmdRVnX8BhVr"></script><!--百度地图api-->
<script type="text/javascript" src="/static/baidumap/js/jquery.bdmap.js"></script><!--百度地图API模块化成函数供前台调用-->
<script type="text/javascript">
    $(function() {
        jinwu();
        setInterval(function working() {
            jinwu();
        }, 60000);
        function jinwu() {
            $imei =$('#imei').val();
            $.ajax({
                url: "{:url('Map/WebService')}",
                type: 'POST',
                data: {
                    imei:$imei
                },
                dataType: 'json',
                success: function (res) {
                    if(res.code ==200){
                        $yjzc_zb=res.data.bdlongitude+ ',' + res.data.bdlatitude;
                        var map = new BMap.Map('allmap');    // 创建Map实例
                        var point =new BMap.Point(res.data.bdlongitude,res.data.bdlatitude);
                        var myIcon = new BMap.Icon("/static/app/img/dingwei1.png", new BMap.Size(30, 45));
                        var marker = new BMap.Marker(point,{icon:myIcon});  // 创建标注
                        map.addOverlay(marker);              // 将标注添加到地图中
                        map.centerAndZoom(point, 18);
                        //光标范围
                        var circle = new BMap.Circle(point, 50, {
                            fillColor: "#3399FF",
                            strokeWeight: 2,
                            fillOpacity: 0.07,
                            strokeOpacity: 0.2
                        });
                        map.addOverlay(circle);
                        //卫星地图切换
                        var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]});
                        //添加地图类型和缩略图
                        map.addControl(mapType1);//2D图，卫星图

                        $('.naui2').attr('href','http://api.map.baidu.com/marker?location='+res.data.bdlatitude+','+res.data.bdlongitude+'&title='+res.data.address+'&content=所在位置的简介（可选）&output=html');

                        $('.address').text(res.data.address);
                        $('.type').children().text(res.data.type);
                        $('.lat').children().text(res.data.bdlongitude);
                        $('.long').children().text(res.data.bdlatitude);
                        if(res.data.online==1){
                            var online ='在线';
                            $time=res.data.updateTime;
                        }else {
                            var online ='离线';
                            $time=res.data.lastLocationsTime;
                        }
                        $('#online').text(online);
                        $('#time').text($time);
                    }else {
                        $('.naui2').css('display','none');
                        var map = new BMap.Map('allmap');    // 创建Map实例
                        var point =new BMap.Point(116.4037447556,39.9150707282);
                        map.centerAndZoom(point,10);
                        $('.tishi').css('display','inline-block');
                        $('.tishi').text(res.msg);
                        $('.address').text(res.msg)
                    }
//                if(res.code==201){
//                    var map = new BMap.Map('allmap');    // 创建Map实例
//                    var point =new BMap.Point(116.4037447556,39.9150707282);
//                    map.centerAndZoom(point,10);
//                    $('.tishi').css('display','inline-block')
//                    $('.tishi').text(res.msg)
//                    $('.address').text(res.msg)
//                }
//                if(res.code==202){
//                    var map = new BMap.Map('allmap');    // 创建Map实例
//                    var point =new BMap.Point(116.4037447556,39.9150707282);
//                    map.centerAndZoom(point,10);
//                    $('.tishi').css('display','inline-block')
//                    $('.tishi').text(res.msg)
//                    $('.address').text(res.msg)
//
//                }
//                if(res.code==203){
//                    var map = new BMap.Map('allmap');    // 创建Map实例
//                    var point =new BMap.Point(116.4037447556,39.9150707282);
//                    map.centerAndZoom(point,10);
//                    $('.tishi').css('display','inline-block')
//                    $('.tishi').text(res.msg)
//                    $('.address').text(res.msg)
//
//                }

                }
            });
        }
    });
    function ddfg() {
        if( $('.fdfd').css('display')=='none'){
            $('.fdfd').css('display','block')
        }else {
            $('.fdfd').css('display','none')
        }
    }
    //切换设备
    function xuhu(obj,imei) {
        $(obj).css('color','red')
        if( $('.fdfd').css('display')=='none'){
            $('.fdfd').css('display','block')
        }else {
            $('.fdfd').css('display','none')
        }
        window.location.href="{:url('Map/mapdata')}?imei="+imei;
    }
    //底部信息收放
    function anui() {
        if( $('.xuan').css('display')=='none'){
            $('.xuan').css('display','block')
            $('.imges').attr('src','/static/app/img/xia.png')
        }else {
            $('.xuan').css('display','none')
            $('.imges').attr('src','/static/app/img/shang.png')
        }
    }
</script>
</html>